<template>
    <view class="container">
        <u-navbar
            title="我的主页"
            @leftClick="navigateTo()"
            :bgColor="'rgba(62,62,91,'+barOpacity+')'"
            leftIconSize="50rpx"
            :leftIconColor="'rgba(255, 255, 255, '+barOpacity+')'"
            height="100rpx"
            :titleStyle="{
                color: 'rgba(255, 255, 255, '+barOpacity+')'
            }"

        >
        </u-navbar>
        <view class="home-top" id="homeTop">
            <view
                class="back-icon"
                @click="$u.route({type: 'back'})"
            ></view>
            <view class="my-info">
                <u-image
                    :src="userInfo.avatar"
                    width="120rpx"
                    height="120rpx"
                    shape="circle"
                ></u-image>
                <view class="user-info">
                    <view class="info-user-name">{{ userInfo.nickName }}</view>
                    <view class="info-user-real" v-if="userInfo.identify"></view>
                    <view class="info-user-unreal" v-else>
                        <u-icon
                            name="https://img.ionepin.com/bee26afb76d621530b60d0b2d74c0254da8678d5.png"
                            width="30rpx"
                            height="30rpx"
                        ></u-icon>
                        <u-text
                           text="未认证"
                           size="24rpx"
                           color="#707070"
                        ></u-text>
                    </view>
                </view>
            </view>
            <view class="user-panel">
                <view class="panel-ul">
                    <view class="panel-li">
                        <view class="panel-info">
                            <view class="panel-info-num">{{ userInfo.followNum }}</view>
                            <view class="panel-info-label">关注</view>
                        </view>
                        <u-line
                            direction="col"
                            length="59rpx"
                            color="#80809E"
                            margin="0 46rpx"
                        ></u-line>
                    </view>
                    <view class="panel-li">
                        <view class="panel-info">
                            <view class="panel-info-num">{{ userInfo.fanNum }}</view>
                            <view class="panel-info-label">粉丝</view>
                        </view>
                        <u-line
                                direction="col"
                                length="59rpx"
                                color="#80809E"
                                margin="0 46rpx"
                        ></u-line>
                    </view>
                    <view class="panel-li">
                        <view class="panel-info">
                            <view class="panel-info-num">{{ sellerNum }}</view>
                            <view class="panel-info-label">在售</view>
                        </view>
                        <u-line
                                direction="col"
                                length="59rpx"
                                color="#80809E"
                                margin="0 46rpx"
                        ></u-line>
                    </view>
                    <view class="panel-li">
                        <view class="panel-info">
                            <view class="panel-info-num">{{ userInfo.nftOwnerCount }}</view>
                            <view class="panel-info-label">藏品</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="nft-info-page">
            <u-sticky
                :zIndex="1"
                bgColor="#F9F9F9"
                :customNavHeight="98 + statusBarHeight"
            >

                <u-tabs
                    :list="tabList"
                    lineColor="#5D5D5D"
                    lineWidth="69rpx"
                    lineHeight="4px"
                    activeStyle="font-size: 26rpx;color: #5D5D5D;line-height: 37rpx;"
                    inactiveStyle="font-size: 26rpx;color: #888888;line-height: 37rpx;"
                    itemStyle="flex: 1;height: 80rpx;border-bottom: 1px solid #EEEEEE;padding: 0 40rpx"
                    :scrollable="false"
                    :current="tabsIndex"
                    @change="handleChange"
                ></u-tabs>
            </u-sticky>
            <view v-show="tabsType == 'nft'" class="my-collect">
                <u-row
                    gutter="22"
                    customStyle="flex-wrap: wrap;"
                    v-if="nftOwnerList.length > 0"
                >
					<block v-for="(item, k) in nftOwnerList" :key="k">
						<u-col class="collect-col" :span="6" @click="$u.route({
							url: 'pages_v2/collectInfo/index',
							params: { nftId: item.nftId, type: 'collection'}
						})">
							<collect-item
							   :nft="item.nft"
							   :number="item.nftNum"
							></collect-item>
						</u-col>
					</block>
                </u-row>
                <u-empty
                    mode="data"
                    width="400rpx"
                    height="400rpx"
                    icon="https://img.ionepin.com/dcfe6ae6d90104cbc50c50dd6010c1f8eabee5a3.png"
                    class="empty"
                    textSize="36rpx"
                    v-else
                >
                </u-empty>
                <u-loadmore
                    height="50rpx"
                    :status="loadStatus"
                    v-if="total > 8"
                    marginTop="20rpx"
                    marginBottom="20rpx"
                    fontSize="32rpx"
                    iconSize="34rpx"
                    line
                />
            </view>
            <view v-show="tabsType == 'sell'" class="collect-sell">
                <view class="exchange-tabs">
                    <!--view class="exchange-tabs-item" @click="changeItem(null)" :class="exchangeQuery.state == null? 'item-action':null">全部</view-->
                    <view class="exchange-tabs-item" @click="changeItem('wait')" :class="exchangeQuery.state == 'wait'? 'item-action':null">挂售中</view>
                    <view class="exchange-tabs-item" @click="changeItem('complete')" :class="exchangeQuery.state == 'complete'? 'item-action':null">已卖出</view>
                    <view class="exchange-tabs-item" @click="changeItem('buy')" :class="exchangeQuery.state == 'buy'? 'item-action':null">买到的</view>
                    <view class="exchange-tabs-item" @click="changeItem('cancel')" :class="exchangeQuery.state == 'cancel'? 'item-action':null">已取消</view>
                </view>
                <u-row
                    gutter="22"
                    customStyle="flex-wrap: wrap;"
                    v-if="exchangeOrderList.length > 0"
                >
                    <block v-for="(item, k) in exchangeOrderList" :key="k">
                        <u-col class="collect-col" :span="6">
                            <exchange-item
                               :exchangeOrder="item"
                               @offShelf="offShelf(item)"
                            ></exchange-item>
                        </u-col>
                    </block>
                </u-row>
                <u-empty
                    mode="data"
                    width="400rpx"
                    height="400rpx"
                    icon="https://img.ionepin.com/dcfe6ae6d90104cbc50c50dd6010c1f8eabee5a3.png"
                    class="empty"
                    textSize="36rpx"
                    v-else
                >
                </u-empty>
                <u-loadmore
                    height="50rpx"
                    :status="exchangeLoadStatus"
                    v-if="exchangeTotal > 8"
                    marginTop="20rpx"
                    marginBottom="20rpx"
                    fontSize="32rpx"
                    iconSize="34rpx"
                    line
                />
            </view>
        </view>
        <view class="h-dynamic"></view>
        <u-popup
            :show="popupShow"
            mode="center"
            :customStyle="{
                width: '620rpx',
                background: '#FFFFFF',
                boxShadow: '0px 0px 13rpx 0px #999999',
                borderRadius: '18rpx',
                overflow: 'hidden'
            }"
        >
            <popup-context
                v-if="popupShow"
                @cancel="popupShow = false"
                p_type="offTheShelf"
                @confirm="handleConfirm"
            ></popup-context>
        </u-popup>
    </view>
</template>

<script>
    import CollectItem from "@/components/CollectItem"
    import ExchangeItem from "./ExchangeItem"
    import { getNftOwnerPage, getExchangeOrder, getUserExchangeNum } from "@/config/api"
    import { cancelExchangeOrder } from "@/config/api-java"
    import PopupContext from "@/components/PopupContext"
    export default {
        name: "index",
        components: {
            CollectItem,
            ExchangeItem,
            PopupContext
        },
        data() {
            const userInfo = {
                nickName: this.$store.getters.nickName,
                avatar: this.$store.getters.avatar,
                followNum: this.$store.getters.followNum,
                fanNum: this.$store.getters.fanNum,
                nftOwnerCount: this.$store.getters.nftOwnerCount,
                identify: this.$store.getters.identify
            }
            return {
                topHeight: null,
                tabList: [
                    {
                        name: "我的藏品",
                        type: "nft"
                    },
                    {
                        name: "我的挂售",
                        type: "sell"
                    }
                ],
                tabsType: "nft",
                tabsIndex: 0,
                navbarShow: false,
                userInfo,
                listQuery: {
                    page: 1,
                    list_rows: 10,
                    column: "ua",
                    direction: "desc"
                },
                total: 0,
                nftOwnerList: [],
                statusBarHeight: 0,
                exchangeOrderList: [],
                exchangeQuery: {
                    page: 1,
                    list_rows: 10,
                    state: "wait"
                },
                exchangeTotal: 0,
                sellerNum: 0,
                scrollTop: 0,
                popupShow: false,
                offExchangeData: null,
                navigate: null
            }
        },
        computed: {
            loadStatus() {
                if (this.total > this.nftOwnerList.length) {
                    return "loading"
                } else {
                    return "nomore"
                }
            },
            barOpacity() {
                var homeTop = uni.upx2px(438)
                if (this.scrollTop > homeTop) {
                    return 1
                } else if (homeTop > this.scrollTop && this.scrollTop > 20) {
                    return Math.floor(this.scrollTop/homeTop * 10) / 10
                } else {
                    return 0
                }
            },
            exchangeLoadStatus() {
                if (this.exchangeTotal > this.exchangeOrderList.length) {
                    return "loading"
                } else {
                    return "nomore"
                }
            }
        },
        onHide() {
            uni.stopPullDownRefresh()
        },
        onLoad(option) {
            this.navigate = option.navigate
            const res = uni.getSystemInfoSync()
            this.statusBarHeight = res.statusBarHeight/(uni.upx2px(100)/100)
            this.getData()
            this.getExchangeData()
        },
        async onShow() {
            this.sellerNum = await getUserExchangeNum()
        },
        async onPullDownRefresh() {
            this.listQuery.page = 1
            this.exchangeQuery.page = 1
            this.exchangeQuery.state = "wait"
            await this.getData()
            await this.getExchangeData()
            this.sellerNum = await getUserExchangeNum()
            uni.stopPullDownRefresh()
        },
        onPageScroll(e) {
            this.scrollTop = e.scrollTop
        },
        onReachBottom() {
            if (this.tabsType === 'nft') {
                if (this.total > this.nftOwnerList.length) {
                    this.listQuery.page += 1
                    this.getData(true)
                }
            }
            if (this.tabsType === 'sell') {
                if (this.exchangeTotal > this.exchangeOrderList.length) {
                    this.exchangeQuery.page += 1
                    this.getExchangeData(true)
                }
            }
        },
        methods: {
            navigateTo() {
                this.$u.route({
                    url: 'pages_v2/center/index',
                    type: 'switchTab'
                })
            },
            async getData(more = false) {
                const res = await getNftOwnerPage(this.listQuery)
                if (more) {
                    this.nftOwnerList = [...this.nftOwnerList, ...res.items]
                } else {
                    this.nftOwnerList = res.items
                }
                this.total = res.total
            },
            async getExchangeData(more=false) {
                const res = await getExchangeOrder(this.exchangeQuery)
                if (more) {
                    this.exchangeOrderList = [...this.exchangeOrderList, ...res.items]
                } else {
                    this.exchangeOrderList = res.items
                }
                this.exchangeTotal = res.total
            },
            handleChange(item) {
                this.tabsType = item.type
            },
            changeItem(state) {
                this.exchangeQuery.state = state
                this.exchangeQuery.page = 1
                this.getExchangeData()
            },
            offShelf(item) {
                this.popupShow = true
                this.offExchangeData = item
            },
            async handleConfirm() {
                const res = await cancelExchangeOrder({orderId: this.offExchangeData.id})
                this.popupShow = false
                uni.$u.toast("取消挂售成功")
                this.exchangeOrderList.forEach(item => {
                    if (item.id === this.offExchangeData.id) {
                        item.state = "cancel"
                        return
                    }
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    .container {
        .home-top {
            background: url("/static/my_page_bg.png") no-repeat;
            background-size: 100% 100%;
            width: 100%;
            height: calc(var(--status-bar-height) + 438rpx);
            //position: relative;
            padding-top: 1rpx;
            .back-icon {
                width: 50rpx;
                height: 50rpx;
                background: url("https://img.ionepin.com/4ce27da730b092a4e2d49332eb48a0157803f864.png") no-repeat;
                background-size: 100% 100%;
                margin-top: calc(var(--status-bar-height) + 55rpx);
                margin-left: 14rpx;
            }
            .my-info {
                margin-top: 21rpx;
                padding-left: 40rpx;
                display: flex;
                .user-info {
                    margin-left: 20rpx;
                    .info-user-name {
                        padding-top: 11rpx;
                        font-size: 32rpx;
                        font-family: PingFang-SC-Bold, PingFang-SC;
                        font-weight: bold;
                        color: #FFD5AD;
                    }
                    .info-user-real {
                        width: 151rpx;
                        height: 42rpx;
                        background: url("https://img.ionepin.com/734ac3a7b5f3a78ccff301266f2e6b8a65d8299b.png") no-repeat;
                        background-size: 100% 100%;
                        margin-top: 11rpx;
                    }
                    .info-user-unreal {
                        margin-top: 11rpx;
                        box-sizing: border-box;
                        width: 151rpx;
                        height: 42rpx;
                        background: linear-gradient(270deg, #F1F1F1 0%, #CDCDCD 100%);
                        border-radius: 21rpx;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        padding-left: 40rpx;
                    }
                }
            }
            .user-panel {
                margin-top: 22rpx;
                padding: 0 14rpx;
                .panel-ul {
                    display: flex;
                    justify-content: flex-end;
                    .panel-li {
                        display: flex;
                        align-items: center;
                        .panel-info {
                            .panel-info-num {
                                text-align: center;
                                font-size: 28rpx;
                                font-family: PingFang-SC-Bold, PingFang-SC;
                                font-weight: bold;
                                color: #FFFFFF;
                                line-height: 1.3;
                            }
                            .panel-info-label {
                                font-size: 24rpx;
                                font-family: PingFangSC-Regular, PingFang SC;
                                font-weight: 400;
                                color: #BBBBCD;
                            }
                        }
                        &:last-child {
                            margin-right: 46rpx;
                        }
                    }
                }
            }
        }
        .nft-info-page {
            .my-collect {
                padding: 40rpx 20rpx;
                background: #F0F2F5;
            }
            .collect-col {
                margin-bottom: 30rpx;
            }
        }
        .collect-sell {
            background: #F0F2F5;
            padding: 0 20rpx;
            .exchange-tabs {
                height: 87rpx;
                display: flex;
                font-size: 26rpx;
                font-family: PingFangSC-Light, PingFang SC;
                font-weight: 300;
                .exchange-tabs-item {
                    padding: 0 21rpx;
                    line-height: 87rpx;
                    color: #888888;
                }
                .item-action {
                    color: #000000;
                }
            }
        }
        .h-dynamic {
            height: calc(var(--window-bottom) + 1px);
        }
        .bottom {
            background: #ffffff;
            box-sizing: border-box;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 20rpx 26rpx calc(var(--window-bottom) + 30rpx) 26rpx;
        }
        .empty {
            padding: 50rpx 0;
        }
    }
</style>
